<template>
  <div>
    <div>
      <el-button
        type="primary"
        style="margin-block: 1em;"
        @click="addOrUpdateHandle()"
      >
        创建仅展示的轮播图
      </el-button>
    </div>

    <!-- 列表相关区域 -->
    <el-table
      v-loading="loading"
      :data="Data"
      :stripe="true"
      :border="true"
      row-key="imgId"
      highlight-current-row
      style="width: 100%;"
    >
      <!-- 图片 -->
      <el-table-column
        label="图片"
        prop="imgUrl"
        align="center"
        width="300px"
      >
        <template #default="scope">
          <img
            :src="`${scope.row.imgUrl}`"
            style="width: 100%; height: 100%;"
          >
        </template>
      </el-table-column>
      <el-table-column
        label="类型"
        prop="seq"
        align="center"
      >
        <template #default="scope">
          <p v-if="scope.row.seq == 2">
            微信
          </p>
          <p v-else-if="scope.row.seq == 1">
            小红书
          </p>
          <p v-else>
            群聊
          </p>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        prop="createTime"
        align="center"
      />
      <el-table-column
        label="更新时间"
        prop="updateTime"
        align="center"
      />
      <!-- <el-table-column -->
      <!-- label="状态" -->
      <!-- prop="status" -->
      <!-- align="center" -->
      <!-- /> -->
      <el-table-column
        label="帖子ID"
        prop="linkUrl"
        align="center"
      />
      <el-table-column
        label="删除"
        prop="seq"
        align="center"
      >
        <template #default="scope">
          <el-button
            :loading="deleteLoading"
            type="danger"
            @click="deleteHandle(scope.row.imgId)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddOrUpdate
      :add-or-update-visible="dialogVisible"
      @close="dialogClose"
    />
  </div>
</template>

<script setup>
import * as api from '@/api/platform/index-img'
import AddOrUpdate from './components/add-or-update.vue'

const loading = ref(false)
const Data = ref()

onMounted(() => {
  getPage()
})

const getPage = () => {
  loading.value = true
  api.getIndexImg({
    type: 2
  })
    .then(res => {
      Data.value = res
      loading.value = false
    })
    .catch(() => {
      ElMessage.error('获取数据失败')
      loading.value = false
    })
}

const deleteLoading = ref(false)
const deleteHandle = (inImgId) => {
  deleteLoading.value = true
  api.deleteIndexImg({
    imgId: inImgId
  })
    .then(() => {
      getPage()
      ElMessage.success('删除成功')
      deleteLoading.value = false
    })
    .catch(() => {
      ElMessage.error('删除失败')
      deleteLoading.value = false
    })
}

// TODO:
const dialogVisible = ref(false)
function addOrUpdateHandle () {
  dialogVisible.value = true
}

function dialogClose () {
  dialogVisible.value = false
  getPage()
}
</script>
